<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>dom查询</title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }

        div {
            margin-left: 10px;
            margin-top: 10px;
            margin-bottom: 10px;
        }

        ul, input {
            margin-top: 10px;
            margin-bottom: 10px;
        }

        ul {
            list-style-type: none;
        }

        li {
            margin-right: 10px;
            display: inline-block;
            border: black solid 1px;
            background-color: #8fee9e;
            padding: 3px;
        }

        .box {
            border: black solid 1px;
            margin-left: 10px;
            margin-top: 10px;
        }

        .question {
            font-size: 12px;
        }

        .content {
            float: left;
        }

        .clearfix:before,
        .clearfix:after {
            content: "";
            display: table;
        }

        .clearfix:after {
            clear: both;
        }

        .clearfix {
            /*IE6、7适用*/
            *zoom: 1;
        }

        #right button {
            display: block;
            margin: 5px;
            font-size: 6px;
            padding: 1px;
        }

        #right {
            margin-top: 20px;
        }
    </style>
    <script type="text/javascript">
        window.onload = function () {
            var btn01 = document.getElementById("btn01");
            var btn02 = document.getElementById("btn02");
            var btn03 = document.getElementById("btn03");
            var btn04 = document.getElementById("btn04");
            var btn05 = document.getElementById("btn05");
            var btn06 = document.getElementById("btn06");
            var btn07 = document.getElementById("btn07");
            var btn08 = document.getElementById("btn08");
            var btn09 = document.getElementById("btn09");
            var btn10 = document.getElementById("btn10");
            var btn11 = document.getElementById("btn11");

            /*查找#beijing节点*/
            btn01.onclick = function () {
                var beijing = document.getElementById("beijing");
                console.log(beijing.innerText);
            };

            /*查找所有li节点*/
            btn02.onclick = function () {
                var lis = document.getElementsByTagName("li");
                for (let li of lis) {
                    console.log(li.innerText);
                }
            }

            /*查找name=gender的所有节点*/
            btn03.onclick = function () {
                var genders = document.getElementsByName("gender");
                for (let gender of genders) {
                    console.log(gender.getAttribute("value"));
                }
            }

            /*查找#questionCity下的所有li节点*/
            btn04.onclick = function () {
                var questionCity = document.getElementById("questionCity");
                // console.log(questionCity.innerText);
                var lis = questionCity.getElementsByTagName("li")
                for (let li of lis) {
                    console.log(li.innerText);
                }
            }

            /*返回#questionCity下的所有子节点*/
            btn05.onclick = function () {
                var questionCity = document.getElementById("questionCity");
                for (let child of questionCity.children) {
                    console.log(child.innerText);
                }
            }

            /*返回#questionOS的第一个子节点*/
            btn06.onclick = function () {
                var questionOS = document.getElementById("questionOS");
                console.log(questionOS.firstElementChild);
            }

            /*返回#beijing的父节点*/
            btn07.onclick = function () {
                var beijing = document.getElementById("beijing");
                console.log(beijing.parentElement);
            }

            /*返回#android的前一个兄弟节点*/
            btn08.onclick = function () {
                var android = document.getElementById("android");
                console.log(android.previousElementSibling);
            }

            /*返回#name的value属性值*/
            btn09.onclick = function () {
                var name = document.getElementById("name");
                console.log(name.getAttribute("value"));
            }

            /*设置#name的value属性值*/
            btn10.onclick = function () {
                var name = document.getElementById("name");
                name.setAttribute("value", "12345");
            }

            /*返回#beijing的文本值*/
            btn11.onclick = function () {
                var beijing = document.getElementById("beijing");
                console.log(beijing.innerText);
            }
        }
    </script>
</head>
<body>
<div class="content">
    <div class="box" id="questions">
        <div class="question" id="questionCity">
            你喜欢哪个城市？
            <ul class="options" id="optionsCity">
                <li id="beijing">北京</li>
                <li id="shanghai">上海</li>
                <li id="tokyo">东京</li>
                <li id="soul">首尔</li>
            </ul>
        </div>
        <div class="question" id="questionGame">
            你喜欢哪款单机游戏？
            <ul class="options" id="optionsGame">
                <li id="hongjing">红警</li>
                <li id="shikuang">实况</li>
                <li id="jipinfeiche">极品飞车</li>
                <li id="moshou">魔兽</li>
            </ul>
        </div>
        <div class="question" id="questionOS">
            你的手机操作系统是？
            <ul class="options" id="optionsOS">
                <li id="ios">IOS</li>
                <li id="android">Android</li>
                <li id="windowsPhone">Windows Phone</li>
            </ul>
        </div>
    </div>
    <div class="box" id="info">
        <div class="question" id="questionGender">
            gender:
            <input type="radio" value="male" name="gender">
            Male
            <input type="radio" value="female" name="gender">
            Female
        </div>
        <div class="question" id="questionName">
            name:
            <input type="text" id="name" value="abcde">
        </div>
    </div>
</div>
<div class="content clearfix" id="right">
    <button id="btn01">查找#beijing节点</button>
    <button id="btn02">查找所有li节点</button>
    <button id="btn03">查找name=gender的所有节点</button>
    <button id="btn04">查找#questionCity下的所有li节点</button>
    <button id="btn05">返回#questionCity下的所有子节点</button>
    <button id="btn06">返回#questionOS的第一个子节点</button>
    <button id="btn07">返回#beijing的父节点</button>
    <button id="btn08">返回#android的前一个兄弟节点</button>
    <button id="btn09">返回#name的value属性值</button>
    <button id="btn10">设置#name的value属性值</button>
    <button id="btn11">返回#beijing的文本值</button>
</div>
</body>
</html>